<template>
    <div class="user-avatar">
        <el-upload
                class="avatar-uploader"
                action=""
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleCrop">
            <el-avatar v-if="circleUrl" :size="avatarSize.size" :src="circleUrl" alt="用户头像" :key="circleUrl" >
                <i class="el-icon-plus avatar-uploader-icon"
                   :style="{width:avatarSize.width,height:avatarSize.height,'line-height':avatarSize.lineHeight,'font-size':avatarSize.fontSize}"/>
            </el-avatar>
            <i v-else class="el-icon-plus avatar-uploader-icon"
               :style="{width:avatarSize.width,height:avatarSize.height,'line-height':avatarSize.lineHeight,'font-size':avatarSize.fontSize}"/>
        </el-upload>
        <!-- 剪裁组件弹窗 -->
        <el-dialog :title="title" :visible.sync="cropperModel" width="800px">
            <cropper ref="cropper" :options="options" @upload="uploadImage">
            </cropper>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import {Component, Emit, Prop, Vue} from "vue-property-decorator";
    import {fileUpload} from "@/api/file";
    import Cropper from "@/components/UserAvatar/Cropper.vue";

    @Component({
        components: {
            Cropper
        }
    })
    export default class UserAvatar extends Vue {
        @Prop() private circleUrl!: string;
        @Prop({type: [String, Number], default: "auto"}) private size!: string | number;
        cropperModel: boolean = false; // 剪裁组件弹窗开关
        title: string = "修改头像";
        get avatarSize() {
            let avatarSize: any = {};
            if (this.size === "auto") {
                avatarSize.width = "100%";
                avatarSize.height = "100%";
                avatarSize.lineHeight = "100%";
                avatarSize.fontSize = "100%";
                avatarSize.size = "large";
            } else {
                avatarSize.width = this.size + "px";
                avatarSize.height = this.size + "px";
                avatarSize.lineHeight = this.size + "px";
                if (typeof this.size === "number") {
                    avatarSize.fontSize = (this.size / 6) + "px";
                    avatarSize.size = this.size;
                } else {
                    avatarSize.fontSize = "100%";
                    avatarSize.size = "large";
                }
            }
            return avatarSize;
        }


        private options: any = {
            img: "", //裁剪图片的地址
            autoCrop: true, // 是否默认生成截图框
            autoCropWidth: 200, // 默认生成截图框宽度
            autoCropHeight: 200, // 默认生成截图框高度
            fixedBox: true // 固定截图框大小 不允许改变
        };


        handleCrop(file: any, files: any) {
            // 点击弹出剪裁框
            file = file.raw;
            this.options.img = window.URL.createObjectURL(new Blob([file], {type: file.type}));
            this.cropperModel = true;
        }

        uploadImage(data: any) {
            fileUpload(data).then((res: any) => {
                this.cropperModel = false;
                this.handleAvatarSuccess(res);
            }).catch((e) => {
                console.log(e);
            });
        }


        beforeClose(done) {
            this.cropperModel = false;
        }


        @Emit("handleAvatarSuccess")
        handleAvatarSuccess(res: any) {
            return res;
        }
    }
</script>

<style lang="scss">
    .user-avatar {
        .avatar-uploader {

            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 50%;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .el-upload:hover {
                border-color: #409EFF;
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                text-align: center;
            }
        }
    }

</style>

